<template>
  <div class="my-component">
    <p>姓名: 谢家欣</p>
    <el-form :model="form" label-width="120px">
      <el-form-item label="姓名">
        <el-input v-model="form.name" placeholder="请输入姓名"></el-input>
      </el-form-item>
      <el-form-item label="邮箱">
        <el-input v-model="form.email" placeholder="请输入邮箱"></el-input>
      </el-form-item>
      <el-form-item label="消息">
        <el-input v-model="form.message" type="textarea" placeholder="请输入消息"></el-input>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="submitForm">提交</el-button>
        <el-button @click="resetForm">重置</el-button>
      </el-form-item>
    </el-form>
  </div>
</template>

<script>
import { defineComponent, reactive } from 'vue'

export default defineComponent({
  name: 'MyComponent',
  setup() {
    const form = reactive({
      name: '',
      email: '',
      message: ''
    })

    const submitForm = () => {
      console.log('提交表单:', form)
      // 这里可以添加表单提交的逻辑
    }

    const resetForm = () => {
      form.name = ''
      form.email = ''
      form.message = ''
    }

    return {
      form,
      submitForm,
      resetForm
    }
  }
})
</script>

<style scoped>
.my-component {
  max-width: 600px;
  margin: 0 auto;
}
</style>